<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title><spring:message code="fittingRoom"></spring:message></title>
    <link href="${pageContext.request.contextPath }/phone/css/cssfolder/cssstyle/font/iconfont.css" rel="stylesheet" type="text/css" />
    <link href="${pageContext.request.contextPath }/phone/css/cssfolder/cssstyle/stylefloder.css" rel="stylesheet" type="text/css" />
    <!-- 引用控制层插件样式 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath }/phone/js/HTML5/control/css/zyUpload.css" type="text/css">
    <link href="${pageContext.request.contextPath }/phone/css/xiadan.css" rel="stylesheet" />
    <script type="text/javascript" src="${pageContext.request.contextPath }/phone/js/HTML5/jquery-1.7.2.js"></script>
    <!-- 引用核心层插件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/phone/js/HTML5/core/zyFile.js"></script>
	<!-- 引用控制层插件 -->
	<!-- 显示中文js -->
	<c:if test="${language=='zh_cn'}">	
	<script type="text/javascript" src="${pageContext.request.contextPath }/phone/js/HTML5/control/js/zyUpload.js"></script>
	</c:if>
	<!-- 显示英文JS -->
	<c:if test="${language=='en' }">
	<script type="text/javascript" src="${pageContext.request.contextPath }/phone/js/HTML5/control/js/zyUploadEn.js"></script>
	</c:if>
	<!-- 引用初始化JS -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/phone/js/HTML5/demo.js"></script>
	
	<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/layer/layer_mobile/layer.js"></script>

     <script type="text/javascript">
     var cencelBtn = $('<div class="clearBtn"><spring:message code="select.cancel"></spring:message></div>');
    var _avatarCode = "101";
    var zoomplus = 0,zoomminus = 0, up = 0, down = 0 , left = 0 , right = 0,filename="";
    var url="",testUrl="";
    var a = 0;
    var b = 0;
    var c = 0;
    var int=0;
    function showModel(fileName) {  
    	$(".top").attr("disabled","disabled");
    	$(".left").attr("disabled","disabled");
    	$(".right").attr("disabled","disabled");
    	$(".bottom").attr("disabled","disabled");
    	$(".add").attr("disabled","disabled");
    	$(".subtract").attr("disabled","disabled");
    	$('#divLoading').show();       
    	if(filename=="")
    	{	   		
    		if($("#test").val()!=undefined&&$("#test").val()!="")
    		{
    			
    			filename=$("#test").val();	
    		}
    		
    		else
    		{   
    			
    			/*  if($("#testUrl").val()!="")
    			  {
    				 filename=$("#testUrl").val();
    			  }
    			 else
    			  {
    				filename="b.JPG";
    			  } */
    			 
    			 filename="b.JPG";
    			
    		}		 		
    		
    	}
        
        var a = zoomplus - zoomminus;
        var b = left - right;
        var c = up - down;
        if (a >= 0) {
            var a=1;
        }
        else{
            var a=2;
        }
        if (b >= 0) {
            var b=1;
        }
        else{
            var b=2;
        }
        if (c>=0) {
            var c=1;
        }
        else{
            var c=2;
        }
        
        var queryStringOut = _avatarCode+a+Math.abs(zoomplus-zoomminus)+b+Math.abs(left-right)+c+Math.abs(up-down)+"\\"+filename;
        var queryStringIn = _avatarCode+a+Math.abs(zoomplus-zoomminus)+b+Math.abs(left-right)+c+Math.abs(up-down)+filename.substring(0,filename.lastIndexOf('.'))+".jpg";
        $.ajax({
    	  type: 'POST',
    	  url:"${pageContext.request.contextPath }/web/pattern/writeTxtKuaYu",
    	  data: {
    	  	isrc:queryStringOut
    	  },
    	  success: function(){
  			 var ss= clearInterval(int);
  		   	// url = '${pageContext.request.contextPath }/upload/clothPicture/syPicture/'+queryStringIn;
  		   	// url = 'http://222.223.251.109:8087/yrsy/upload/clothPicture/syPicture/'+queryStringIn;
  		   	 url='${imgpath }new/'+queryStringIn;  		   
  	     	 $('#imgModel').attr('onerror', "this.src='"+ $("#hiddenUrl").val()+"'");    	
  	         $("#hiddenUrl").val(url); 
  	         testUrl='/upload/clothPicture/syPicture/'+queryStringIn;
  			// int=setInterval("document.getElementById('imgModel').src='"+url+"'",1000);  
  			// int=setInterval("setUrl('/upload/clothPicture/syPicture/'"+queryStringIn+')"',1000);
  			
   	        $(".messagemox").css("display", "none");
  	        $(".conceal").hide();		
  	        
  			 int =setInterval("setUrl()",1000);	
  			 
  		  },
    	  error: function(){
    	  	//alert("服务器未响应");
    	  }
    	});
    }
    function setUrl()
    {
        $.ajax({
      	 //url:"${pageContext.request.contextPath }/web/classify/testImgKuaYu",
      	 url:"${pageContext.request.contextPath }/web/pattern/testImgKuaYu",
      	 data: {
      		ImgPath:testUrl,
      		s:$("#size").val(),
      		n:$("#no").val()
      	  },
      	  success: function(result){         		
      		 if(result==1)
      			{        			
      			 document.getElementById('imgModel').src=url;    
      			 $("#savePic").attr("href",url);
      			 clearInterval(int);
      			 removeD();
      			 $('#divLoading').hide();      			 
      		    }      	   	
      	  },
      	  error: function(){
      	  	alert("服务器未响应");
      	  }
        }); 
   	}  
    
    function getInfo(pId,vip){
    	if(vip==2){
			$.ajax({
				url:'${pageContext.request.contextPath }/web/patternfilter/judge', 
				async : false,
				type : "POST",  
				success :function(result){
	       			var status=result.msg.status;
	       			var desc=result.msg.desc;
       			    if(status == 1){//没登录
       			    	/* layer.confirm('<spring:message code="flowertypecatalog.notLogin"></spring:message>', {
    			        	  btn: ['<spring:message code="flowertypecatalog.agreed"></spring:message>','<spring:message code="flowertypecatalog.unagree"></spring:message>'], //按钮
    			        	  title:'<spring:message code="flowertypecatalog.message"></spring:message>'
    			        	}, function(index){
    			        		location.href="${pageContext.request.contextPath}/aip/toPhonePage/login";
    			        	},function(index){
    			        		
    			        	}); */
       			    	layer.open({
               			    content: '<spring:message code="flowertypecatalog.notLogin"></spring:message>'
               			    ,btn: ['<spring:message code="reciveAddress.confirm"></spring:message>', '<spring:message code="reciveAddress.cancel"></spring:message>']
               			    ,yes: function(index){
               			    	location.href = "${pageContext.request.contextPath}/aip/toPhonePage/login";
               			      layer.close(index);
               			    }
               			  });
       			    	flag=true;
       			    }else if(status ==2){
       			    	/* layer.confirm('<spring:message code="flowertypecatalog.applyForVIP"></spring:message>', {
       			        	  btn: ['<spring:message code="flowertypecatalog.agreed"></spring:message>','<spring:message code="flowertypecatalog.unagree"></spring:message>'], //按钮
       			        	  title:'<spring:message code="flowertypecatalog.message"></spring:message>'
       			        	}, function(index){
       			        		location.href="${pageContext.request.contextPath}/web/vip/applicationPhoneForVIP";
       			        		layer.close(index);
       			        	},function(index){
       			        		layer.close(index);
       			        	}); */
       			    	layer.open({
               			    content: '<spring:message code="flowertypecatalog.applyForVIP"></spring:message>'
               			    ,btn: ['<spring:message code="reciveAddress.confirm"></spring:message>', '<spring:message code="reciveAddress.cancel"></spring:message>']
               			    ,yes: function(index){
               			    	location.href = "${pageContext.request.contextPath}/api/vip/applicationPhoneForVIP";
               			      layer.close(index);
               			    }
               			  });
       			    	
       			    }else{
       			    	top.location.href='${pageContext.request.contextPath}/api/toPhonePage/patternShiyi?id='+pId;
       			    }
   		  		}
			});
			}else{
				$.ajax({
					url:'${pageContext.request.contextPath }/web/patternfilter/judge', 
					async : false,
					type : "POST",  
					success :function(result){
		   			 	var status=result.msg.status;
		   			 	var desc=result.msg.desc;
		   			    if(status == 1){//没登录
		   			    	/* layer.confirm('<spring:message code="flowertypecatalog.notLogin"></spring:message>', {
		   			        	  btn: ['<spring:message code="flowertypecatalog.agreed"></spring:message>','<spring:message code="flowertypecatalog.unagree"></spring:message>'], //按钮
		   			        	title:'<spring:message code="flowertypecatalog.message"></spring:message>'
		   			        	}, function(index){
		   			        		location.href="${pageContext.request.contextPath}/aip/toPhonePage/login";
		   			        	},function(index){
		   			        		
		   			        	}); */
		   			    	layer.open({
	               			    content: '<spring:message code="flowertypecatalog.notLogin"></spring:message>'
	               			    ,btn: ['<spring:message code="reciveAddress.confirm"></spring:message>', '<spring:message code="reciveAddress.cancel"></spring:message>']
	               			    ,yes: function(index){
	               			    	location.href = "${pageContext.request.contextPath}/api/toPhonePage/login";
	               			      layer.close(index);
	               			    }
	               			  });
		   			    }else{
		   			    	top.location.href='${pageContext.request.contextPath}/api/toPhonePage/patternShiyi?id='+pId;
		   			    }
					}
				});
			}
    }
    function removeD()
    {
    	$(".top").removeAttr("disabled");
    	$(".left").removeAttr("disabled");
    	$(".right").removeAttr("disabled");
    	$(".bottom").removeAttr("disabled");
    	$(".add").removeAttr("disabled");
    	$(".subtract").removeAttr("disabled");
    }

     $(".pattern img").click(function(){
        var path = $(this).attr("src");
        //从路径中截取图片名[包括后缀名]
        if(path.indexOf("/")>0)
        //如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
        {
            filename=path.substring(path.lastIndexOf("/")+1,path.length);
        }
        else
        {
            filename=path;
        }
     	zoomplus = 0,zoomminus = 0, up = 0, down = 0 , left = 0 , right = 0;
    	a = 0;
    	b = 0;
    	c = 0;
        showModel();
        });

    function Up() {
        up++;
        showModel();
    }

    function Down() {
        down++;
        showModel();
    }

    function Left() {
        left++;
        showModel();
    }

    function Right() {
        right++;
        showModel();
    }

    function zoomPlus() {
        zoomplus++;
        showModel();
    }

    function zoomMinus() {
        zoomminus++;
        showModel();
    }


    function changeAvatar(obj,avatarCode) {
    	$(".replacement-model .content ul.clotheslist li").children().removeClass("on");
    	$(obj).parent().addClass("on").parent().siblings().children().removeClass("on");
    	$(".motelthis").show();
		$(".motellast").hide();
        _avatarCode = String(parseInt(avatarCode) + parseInt(100));
        showModel();
        $('body').css({"overflow":"visible","height":"auto","position":"static"});
    }


    function changeFileName(obj,fileName) {	
    	$(".replacement-flower-type .content ul.clotheslist li").children().removeClass("on");
    	$(obj).parent().addClass("on").parent().siblings().children().removeClass("on");

    	filename=fileName;
    	
        showModel();
        $('body').css({"overflow":"visible","height":"auto","position":"static"});
    }
        function changeFileNameNew(fileName) {	    	
    	if(fileName.split('/')[7]!=undefined)
    		{
    		  filename=fileName.split('/')[7];
    		}
    	else
    		{
    		  filename=fileName.split('/')[3];
    		}
    	
        showModel();
    }
        
      	//我的模特
        function myModel(){
        	$.ajax({url:'${pageContext.request.contextPath }/web/patternfilter/judge', async : false,type : "POST",  success :function(result){
      			 var status=result.msg.status;
      			 var desc=result.msg.desc;
      			    if(status == 1){//没登录
      			     layer.open({
      				    content: '<spring:message code="flowertypecatalog.notLogin"></spring:message>'
      				    ,btn: ['<spring:message code="flowertypecatalog.agreed"></spring:message>', '<spring:message code="flowertypecatalog.unagree"></spring:message>']
      				    ,yes: function(index){
      				    	location.href="${pageContext.request.contextPath}/api/toPhonePage/login";
      				      layer.close(index);
      				    }
      				  });
      			    	
      			    	flag=true;
      			    }else if(status ==2){
      			     layer.open({
       				    content: '<spring:message code="flowertypecatalog.applyForVIP"></spring:message>'
       				    ,btn: ['<spring:message code="flowertypecatalog.agreed"></spring:message>', '<spring:message code="flowertypecatalog.unagree"></spring:message>']
       				    ,yes: function(index){
       				    	location.href="${pageContext.request.contextPath}/api/toPhonePage/applyForVip";
      			        		layer.close(index);
       				    }
       				  });      			           			    	      			    	
      			    }else{
      			    	mymodel();
      			    }
      		  	}
   			});
        }
    
    $(function () {
        
     	//分享
     	$(".item-share,.jiathis_style_32x32").click(function(){
     		//alert(1);
     		$(".jiathis_style_32x32").toggleClass("hide");
     	});
    	    showModel();   	  
    	    var _top = 0;
            var _left = 0
            $(".top").click(function () {           	
                _top -= 10;
                var _position = _left + "px " + _top + "px";
                Up();
                //alert(_position);
               // $(".content .model").css({ "background-position": _position });
                //alert(1);
            });
            $(".bottom").click(function () {
                _top += 10;
                var _position = _left + "px " + _top + "px";
                Down();
               // $(".content .model").css({ "background-position": _position });
            });
            $(".left").click(function () {
                _left -= 10;
                var _position = _left + "px " + _top + "px";
                Left();
              //  $(".content .model").css({ "background-position": _position });
            });
            $(".right").click(function () {
                _left += 10;
                var _position = _left + "px " + _top + "px";
                Right();
               // $(".content .model").css({ "background-position": _position });
            });
            var _num_as = 100;
            var _add = _num_as;
            $(".add").click(function () {
                _add = _num_as;
                //alert(_add);
                _add += 10;
                if (_add >= 200) {
                    _add = 200;
                }
                var _backsize = _add + "px " + "auto";
                    //$(".content .model").css({ "background-size": _backsize });
                    $(".percent").text(_add + "%");
                _num_as = _add;
                zoomPlus();
            });
            
            var _subtract = "";
            $(".subtract").click(function () {
                _subtract = _num_as;
                //debugger;
                //alert(_num_as);
                _num_as -= 10;
                if (_subtract <= 50) {
                    _num_as = 50;
                }
                var _backsize = _num_as + "px " + "auto";
               // $(".content .model").css({ "background-size": _backsize });
                $(".percent").text(_num_as + "%");
                zoomMinus();
                //alert(_num_as);     

        });
        /*模拟弹出事件*/
        // 根据当前页面于滚动条的位置，设置提示对话框的TOP和left
        function showMessagemox(obj) {
            var objw = $(window);//当前窗口
            var a = document.getElementsByClassName(obj);
            var objc = $(a);//当前对话框
            var brsw = objw.width();
            var brsh = objw.height();
            var sclL = $(window).scrollLeft();
            var sclT = $(window).scrollTop();
            var curw = objc.width();
            var curh = objc.height();
            //计算对话框居中时的左边距
            var left = sclL + (brsw - curw) / 2;
            var top = sclT + (brsh - curh) / 2;

            //设置对话框居中
            objc.css({
                "left": left,
                "top": top,
                "display": "block"
            });
        }
        //显示透明背景
        function showConceal() {
            $(".conceal").eq(0).css("opacity", "0.6").show();
        }
        //隐藏弹出框
        function hideModal() {
            $(".messagemox").css("display", "none");
            $(".conceal").hide();
            $('body').css({"overflow":"visible","height":"auto","position":"static"});
        }
        //弹出框关闭按钮单击事件
        $(".headli img").click(function () {
            hideModal();
            $('body').css({"overflow":"visible","height":"auto","position":"static"});
        });
        //单击空白处关闭
        /*$(".conceal").click(function () {
            hideModal();
        })*/
        //“更换模特”按钮的触发事件
        $(".replacement-model-btn").click(function () {
            hideModal();
            showConceal();
            showMessagemox("replacement-model");
            $('body').css({"overflow":"hidden","height":"100%","position":"fixed"});
        });
        //“更换花型”按钮的触发事件
        $(".replacement-flower-type-btn").click(function () {
            hideModal();
            showConceal();
            showMessagemox("replacement-flower-type");
            $('body').css({"overflow":"hidden","height":"100%","position":"fixed"});
        });
      //testjsonp();
  	  $("#selfpicframe").click(function () {   	
  		  hideModal();
  		  
            $("#selfpicframedemo").fadeIn(100)
        });
  	$(".content .change_prod li").each(function(){
  		if($(this).hasClass("on")){
  			$(this).find(".huise").hide();
  			$(this).find(".lvse").show();
  		}else{
  			$(this).find(".lvse").hide();
  			$(this).find(".huise").show();
  		}
  	});
  	 $(".content .change_prod li").click(function () {
  		 $(".lvse").hide();
 		 $(".huise").show();
         $(".content .change_prod li").eq($(this).index()).addClass("on").siblings().removeClass('on');
         $(".content .change_prod_cont").removeClass('on').eq($(this).index()).addClass("on");
         //$(".content .change_prod li img").eq($(this).index()).attr("src")
         $(".content .change_prod li").eq($(this).index()).find(".huise").hide();
         $(".content .change_prod li").eq($(this).index()).find(".lvse").show();
     });
      }); 
    
	function guanzhu(obj){
		$.ajax({
			 url:'${pageContext.request.contextPath }/web/patternfilter/collect',
			 async : false,
			 data: {pId:$("#pId").val()},
			 type : "POST", 
			 success :function(result){
			 var status=result.msg.status;
			 var desc=result.msg.desc;
			 if(status == 0){
				 $(obj).attr("src","${pageContext.request.contextPath }/phone/css/cssfolder/imgfile/icon_alreadycollected.png");
				 $(obj).attr("class","yes");
				 $(obj).attr("onclick","quxiaoguanzhu(this)"); 				
				 layer.open({
	  	   			    content: '<spring:message code="flowertypecatalog.successful"></spring:message>'
	  	   			    ,time: 1 //1秒后自动关闭
	  	   			  });
				 //layer.msg('<spring:message code="flowertypecatalog.successful"></spring:message>', {icon: 1,time: 1000}); 
			 }else if(status == 2){//没登录
				/* layer.confirm('<spring:message code="flowertypecatalog.notLogin"></spring:message>', {
        	  btn: ['<spring:message code="flowertypecatalog.agreed"></spring:message>','<spring:message code="flowertypecatalog.unagree"></spring:message>'], //按钮
        	  title:'<spring:message code="flowertypecatalog.message"></spring:message>'
        	}, function(index){
        		location.href="${pageContext.request.contextPath}/aip/toPhonePage/login";
        	},function(index){
        		
        	}); */
				layer.open({
       			    content: '<spring:message code="flowertypecatalog.notLogin"></spring:message>'
       			    ,btn: ['<spring:message code="reciveAddress.confirm"></spring:message>', '<spring:message code="reciveAddress.cancel"></spring:message>']
       			    ,yes: function(index){
       			    	location.href = "${pageContext.request.contextPath}/api/toPhonePage/login";
       			      layer.close(index);
       			    }
       			  });
			    }else if(status ==1){//失败
			    	//layer.msg('<spring:message code="flowertypecatalog.failed"></spring:message>', {icon: 0,time: 1000}); 
			    	layer.open({
	  	   			    content: '<spring:message code="flowertypecatalog.failed"></spring:message>'
	  	   			    ,time: 1 //1秒后自动关闭
	  	   			  });
			    }
			 }
			 });
	}
	
	function quxiaoguanzhu(obj){
		$.ajax({
   			 url:'${pageContext.request.contextPath }/web/patternfilter/delcollect',
   			 async : false,
   			 data: {pId:$("#pId").val()},
   			 type: "POST", 
   			 success :function(result){
   			 var status=result.msg.status;
   			 var desc=result.msg.desc;
   			 if(status == 0){  				
   				$(obj).attr("src","${pageContext.request.contextPath }/phone/css/cssfolder/imgfile/icon_addcollection.png");
   				$(obj).attr("class","no");
   				$(obj).attr("onclick","guanzhu(this)");
   				layer.open({
  	   			    content: '<spring:message code="flowertypecatalog.successful"></spring:message>'
  	   			    ,time: 1 //1秒后自动关闭
  	   			  });
   				//layer.msg('<spring:message code="flowertypecatalog.successful"></spring:message>', {icon: 1,time: 1000}); 
   			 }else if(status == 2){//没登录   				 
   				/* layer.confirm('<spring:message code="flowertypecatalog.notLogin"></spring:message>', {
  	        	  btn: ['<spring:message code="flowertypecatalog.agreed"></spring:message>','<spring:message code="flowertypecatalog.unagree"></spring:message>'], //按钮
  	        	title:'<spring:message code="flowertypecatalog.message"></spring:message>'
  	        	}, function(index){
  	        		location.href="${pageContext.request.contextPath}/aip/toPhonePage/login";
  	        	},function(index){
  	        		
  	        	}); */
   				layer.open({
       			    content: '<spring:message code="flowertypecatalog.notLogin"></spring:message>'
       			    ,btn: ['<spring:message code="reciveAddress.confirm"></spring:message>', '<spring:message code="reciveAddress.cancel"></spring:message>']
       			    ,yes: function(index){
       			    	location.href = "${pageContext.request.contextPath}/api/toPhonePage/login";
       			      layer.close(index);
       			    }
       			  });
   			 
   			    }else if(status ==1){//失败
   			    	layer.open({
	  	   			    content: '<spring:message code="flowertypecatalog.failed"></spring:message>'
	  	   			    ,time: 1 //1秒后自动关闭
	  	   			  });
   			    	//layer.msg('<spring:message code="flowertypecatalog.failed"></spring:message>', {icon: 0,time: 1000}); 
   			    }
   			 }
   			 });		
	}
	/* 我的模特 */
	function mymodel(){
		$(".motelthis").hide();
		$(".motellast").show();
	}
	function mymodelhide(){
		$(".motelthis").show();
		$(".motellast").hide();
	}
    </script>
</head>
<body>
<div class="motelthis">
<c:if test="${patternnew.P_ID!=null }">
<ul class="shiyititle">
<li><a href="${pageContext.request.contextPath }/api/pattern/chengpin?id=${patternnew.P_ID }"><spring:message code="pattern.chengpin"></spring:message></a></li>
<li><a href="${pageContext.request.contextPath }/api/pattern/yinhua?id=${patternnew.P_ID }"><spring:message code="pattern.yinhua"></spring:message></a></li>
<li><a href="${pageContext.request.contextPath }/api/pattern/maiduan?id=${patternnew.P_ID }"><spring:message code="pattern.maiduan"></spring:message></a></li>
<li onclick="myModel();"><spring:message code="pattern.mote"></spring:message></li>
</ul>
</c:if>
<input type="hidden" id="hiddenUrl" value="">
  <input type="hidden" id="size" value="${pattern.chicun}"> 
    <input type="hidden" id="no" value="${pattern.pNo}"> 
    <!-- 内容Begin -->
    <div id="divLoading" style="position:absolute;top:50%;left:50%;z-index:999;">
		<img src="${pageContext.request.contextPath }/phone/css/cssfolder/imgfile/loading.gif" />
    </div>       
    <div class="content">
         <input type="hidden" value="${patternnew.P_ID }" id="pId"/> 
         <div class="menu">
            <ul>
                <li class="item-model replacement-model-btn"><div><spring:message code="pattern.genggaimote"></spring:message></div></li>
                <li class="item-pattern replacement-flower-type-btn"><div><spring:message code="pattern.genggaihuaxing"></spring:message></div></li>
                <li class="" id="selfpicframe"><div><spring:message code="pattern.shangchuanhuaxing"></spring:message></div></li>
                
                	 <c:if test="${member!=null}"> 
                	  <c:if test="${patternnew.P_ID!=null }">
                	 <li class="deve-cont-like">     
                	                	               	  	    	                	 
					  <c:if test="${patternnew.id==null }">					
					    <img class="no" onclick="guanzhu(this)" src="${pageContext.request.contextPath }/phone/css/cssfolder/imgfile/icon_addcollection.png" />					
					  </c:if>
					  <c:if test="${patternnew.id!=null}">					
					     <img class="yes" onclick="quxiaoguanzhu(this)" src="${pageContext.request.contextPath }/phone/css/cssfolder/imgfile/icon_alreadycollected.png" />        				
					  </c:if>
					 </li>
				    </c:if>			
               </c:if>
                <li class="item-share"><div><spring:message code="pattern.fenxiang"></spring:message></div></li>
                
                     <!-- JiaThis Button BEGIN -->
                     <div onmouseover="setShare('', '/web/main/index');">
				         <div class="jiathis_style_32x32 hide">
							<a class="jiathis_button_tsina"></a>
							<a class="jiathis_button_weixin"></a>
							<a class="jiathis_button_cqq"></a>
						 </div>
					 </div>
					<script type="text/javascript" src="${pageContext.request.contextPath }/phone/js/jia.js" charset="utf-8"></script>
             </ul>
         </div>                        
        <img class="model" id="imgModel"   onerror="this.src='${pageContext.request.contextPath }/phone/css/cssfolder/imgfile/1.png'"   src="${pageContext.request.contextPath }/phone/css/cssfolder/imgfile/1.png"/>
        <div class="direction">
            <button class="top"><i class="icon Hui-iconfont">&#xe6d6;</i></button>
            <button class="left"><i class="icon Hui-iconfont">&#xe6d4;</i></button>
            <button class="right"><i class="icon Hui-iconfont">&#xe6d7;</i></button>
            <div class="clear"></div>
            <button class="bottom"><i class="icon Hui-iconfont">&#xe6d5;</i></button>
            <button class="add"><i class="icon Hui-iconfont">&#xe600;</i></button>
            <button class="subtract"><i class="icon Hui-iconfont">&#xe6a1;</i></button>
            <div class="percent">100%</div>
        </div>
        <div class="item-save"><a id="savePic" download="yongrongfang" style="display:block;width:40px;height:40px;"><div><spring:message code="pattern.baocun"></spring:message></div></a></div>
       <div id="selfpicframedemo" class="selfpicframedemo"></div> 
    </div>
    <!--更改模特提示信息-->
    <div class="conceal"></div>
    <div class="messagemox  replacement-model">
    	<div class="moteshiy">
    
	        <div class="headli">
	            <img alt="点击可以关闭" src="${pageContext.request.contextPath }/phone/css/cssfolder/imgfile/title_btn_close_1e95bf5.png" width="8px" height="38px;">
	        </div>
	        <div class="content">
	        
		        <ul class="change_prod">
		            <li class="on"><img class="huise" src="${pageContext.request.contextPath }/phone/img/0010.jpg" /><img class="lvse" src="${pageContext.request.contextPath }/phone/img/0011.jpg" /><br /><spring:message code="pattern.shangyi"></spring:message></li>
		            <li><img class="huise" src="${pageContext.request.contextPath }/phone/img/0020.jpg" /><img class="lvse" src="${pageContext.request.contextPath }/phone/img/0021.jpg" /><br /><spring:message code="pattern.qunzi"></spring:message></li>
		            <li><img class="huise" src="${pageContext.request.contextPath }/phone/img/0030.jpg" /><img class="lvse" src="${pageContext.request.contextPath }/phone/img/0031.jpg" /><br /><spring:message code="pattern.waitao"></spring:message></li>
		            <li><img class="huise" src="${pageContext.request.contextPath }/phone/img/0040.jpg" /><img class="lvse" src="${pageContext.request.contextPath }/phone/img/0041.jpg" /><br /><spring:message code="pattern.nanzhuang"></spring:message></li>
		        </ul>
		        <div class="change_prod_cont on">
		           <div class="square-title"></div>
		            <ul class="clotheslist">
		                <li><div class="square-bor on"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/01.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'1')"></div></div></li>
		                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/02.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'2')"></div></div></li>
		                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/03.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'3')"></div></div></li>
		                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/05.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'5')"></div></div></li>
		                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/06.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'6')"></div></div></li>
		                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/09.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'9')"></div></div></li>
		            </ul>
		        </div>
		        <div class="change_prod_cont">
		            <div class="square-title"></div>
		            <ul class="clotheslist">
		                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/16.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'16')"></div></div></li>
		                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/19.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'19')"></div></div></li>
		            </ul>
		        </div>
		        <div class="change_prod_cont">
		           <div class="square-title"></div>
		            <ul class="clotheslist">
		                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/16.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'16')"></div></div></li>
		                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/19.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'19')"></div></div></li>
		            </ul>
		        </div>
		     	<div class="change_prod_cont">
		           <div class="square-title"></div>
		            <ul class="clotheslist">
		                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/16.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'16')"></div></div></li>
		                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/19.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'19')"></div></div></li>
		            </ul>
		        </div>
	        </div>
	    </div>
    </div>
    <!--更改花型提示信息-->
     <input type="hidden" id="test" value="${pattern.pImg}"> 
    <div class="messagemox replacement-flower-type">
        <div class="headli">
            <img alt="点击可以关闭" src="${pageContext.request.contextPath }/phone/css/cssfolder/imgfile/title_btn_close_1e95bf5.png" width="8px" height="38px;">
        </div>
        <div class="content">
            <div class="square-title"><spring:message code="pattern.pattern"></spring:message></div>
            <ul class="clotheslist">
             <c:forEach items="${patternlist}" var="item">
               <li>
               		<div class="square-bor on">
               			<div class="img-square-flower" style="background:url(${imgpath }${item.pImg}) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="getInfo(${item.pId},${item.pVip});"></div>
               		</div>
               		<c:if test="${item.pVip==2 }">
						<div class="serial-vip">VIP</div>	
					</c:if>
                   	
               </li>                 
            </c:forEach>                                                                                                  
          </ul>             
        </div>
    </div>
    <!--弹出框-->
<!-- 内容End -->     
</div> 
 <div class="motellast">
        <!--头部--有分类-->
        <div class="cate_header">
            <div class="putong_top">
                <a onclick="mymodelhide();" href="javascript:void(0);"></a>
                <div><spring:message code="pattern.mote"></spring:message></div>
            </div>
        </div>
        <div role="main" class="main" style="padding-bottom:0px;">
        <ul class="clotheslist" style="width: 97%;border: 2px solid #ccc !important;">
                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/01.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'1')"></div></div></li>
                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/02.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'2')"></div></div></li>
                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/03.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'3')"></div></div></li>
                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/05.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'5')"></div></div></li>
                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/06.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'6')"></div></div></li>
                <li><div class="square-bor"><div class="img-square" style="background:url(${pageContext.request.contextPath }/phone/css/cssfolder/Picture/09.jpg) no-repeat; background-position:center;-moz-background-size:100% auto;background-size:100% auto" onclick="changeAvatar(this,'9')"></div></div></li>
            </ul>
        </div>
       
   </div>
    <!--单页面使用多分享按钮需要增加的分享参数代码-->                        
<script type="text/javascript">
  function setShare(title, url) {
	  var curWwwPath=window.document.location.href;

	  //获取主机地址之后的目录如：/Tmall/index.jsp
	  var pathName=window.document.location.pathname;
	  var pos=curWwwPath.indexOf(pathName);

	  //获取主机地址，如： http://localhost:8080
	  var localhostPaht=curWwwPath.substring(0,pos); 
      jiathis_config.title = title;
      jiathis_config.url = localhostPaht+"/bdyz"+url;
  }
    var jiathis_config = {}
  </script>   
<!--分享参数代码结束-->
<!--分享功能代码统一放到页尾-->
<script type="text/javascript" src="http://v1.jiathis.com/code/jia.js?uid=2091511" charset="utf-8"></script>  
</body>

</html>